<template>
  <div class="ant-descriptions ant-descriptions-bordered">
    <div class="ant-descriptions-title">
      <span>打卡总结</span>
    </div>
    <a-table
      v-if="report && report.content"
      ref="table"
      bordered
      size="middle"
      rowKey="recordDate"
      :columns="headers"
      :dataSource="data"
      :pagination="false"
      :scroll="{ x: 1650 }"
    >
    </a-table>
    <div v-else>
      <a-empty :image="simpleImage" />
    </div>
  </div>
</template>

<script>
import { Empty } from 'ant-design-vue'

export default {
  name: 'SigninRecord',
  props: ['report'],
  data() {
    const renderContent = (value, row, index, field) => {
      let element = ''
      if ((value != undefined && value != null) || row[field + 'Describe']) {
        if (value) {
          var img = value.split(',')
          element = img.map(item => {
            return (
              <div style="width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                <div style="float:left; width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                  <img style="width: 80px; height: 80px;" src={item} preview={img}></img>
                </div>
              </div>
            )
          })
        }

        if (row[field + 'Describe']) {
          if (element && element.length > 0) {
            element.push(<p>{row[field + 'Describe']}</p>)
          } else {
            element = <span>{row[field + 'Describe']}</span>
          }
        }
      } else if (value == '') {
        element = <h3 style="font-weight:bold; color: red">漏打</h3>
      }

      const obj = {
        children: element, // 这是渲染列的值，支持渲染html
        attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
      }
      if (row.recordStat != 1) {
        obj.attrs.colSpan = 0 // 该列不渲染
      }
      return obj
    }

    const lowHighRenderContent = (value, row, index, field) => {
      let element = ''

      if (value) {
        if (row[field] && row[field] == 1) {
          element = (
            <span style="font-weight:bold; color: red">
              {value} <img src="../up.png" />
            </span>
          )
        } else if (row[field] && row[field] == 3) {
          element = (
            <span style="font-weight:bold; color: red">
              {value} <img src="../down.png" />
            </span>
          )
        } else {
          element = <span>{value}</span>
        }
      } else if (value == null) {
        element = <h3 style="font-weight:bold; color: red">漏打</h3>
      }

      const obj = {
        children: element, // 这是渲染列的值，支持渲染html
        attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
      }
      return obj
    }
    return {}
  },
  computed: {
    headers() {
      let formatHeaders = []
      if (this.report.header) {
        // 处理数据字段
        const FormatField = 'https'
        // 不处理数据行
        const notFormatRow = ['打卡率']
        this.report.header.forEach((item, index) => {
          formatHeaders.push({
            title: item.tableName,
            dataIndex: item.key,
            key: item.key,
            width: 100,
            align: 'center',
            customRender: (value, row, index) => {
              if (notFormatRow.includes(row.k0)) {
                return {
                  children: value, // 这是渲染列的值，支持渲染html
                  attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
                }
              }
              let element = []
              if (value && value.indexOf(FormatField) != -1) {
                const valueArr = value.split(',')
                element = valueArr.map(v => {
                  return (
                    <div style="display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 353px;">
                      <div style="position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                        <img style="width: 80px; height: 80px;" src={v} preview={valueArr}></img>
                      </div>
                    </div>
                  )
                })
              } else {
                if (value) {
                  element.push(value)
                } else {
                  element = <h3 style="margin-bottom:0;font-weight:bold; color: red">漏打</h3>
                }
              }
              const obj = {
                children: element, // 这是渲染列的值，支持渲染html
                attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
              }
              return obj
            }
          })
          if (index === 0) {
            formatHeaders[index].width = 150
            formatHeaders[index].fixed = 'left'
            formatHeaders[index].align = 'left'
          }
        })
      }
      return formatHeaders
    },
    data() {
      return this.report ? this.report.content : []
    }
  },
  methods: {},
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  }
}
</script>

<style lang="less" scoped></style>

